<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>

    <script src="JsScript.js"></script>
</head>
<style>
    /*整体去除内外边距*/
    * {
        margin: 0;
        padding:0;
    }
    /*取消列表的图标内容*/
    ul{
        list-style: none;
    }
    /*对整体部分的控制，浏览图片的窗口*/
    .banner{
        width: 1024px;
        height: 512px;
        border: 2px solid #ccc;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
    }
    /*图片的初步设置后面的动态内容会在js中实现*/
    .img{
        width:1024px;
        height: 512px;
        position: absolute;
        top: 0;
        left: 0;
    }
    /*让没长图片向左浮动*/
    .img li{
        float: left;
    }
    /*圆点承载部分的设计*/
    .num{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        font-size: 0;
    }
    /*圆点设计*/
    .num li{
        width: 10px;
        height: 10px;
        background:rgba(0,0,0,0.5);
        border-radius: 100%;
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
    }
    /*按钮部分初始不可见*/
    .btn{
        display: none;
    }
    /*按钮形状设计*/
    .btn span{
        display: block;
        width: 50px;
        height: 100px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 40px;
        line-height: 100px;
        text-align: center;
        cursor:pointer;
    }
    /*上一个设计*/
    .btn .prev{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -50px;
    }
    /*下一个设计*/
    .btn .next{
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -50px;
    }
    /*对按妞动态呈现的变换进行类选择器的设计为js代码部分进行铺垫*/
    .num .active{
        background-color: #fff;
    }
    .hide{
        display: none;
    }
</style>
<body>
<!--轮播图整体div-->
<div class="banner">
    <!--无序列表承载轮播的图片-->
    <ul class="img">
        <li><a href="#"><img src="image/1.jpg" alt="第1张图片"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="第2张图片"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="第3张图片"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="第4张图片"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="第5张图片"></a></li>
        <li><a href="#"><img src="image/6.jpg" alt="第6张图片"></a></li>
        <li><a href="#"><img src="image/7.jpg" alt="第7张图片"></a></li>

    </ul>
    <!--用来放置圆点具体实施在js代码中呈现-->
    <ul class="num"></ul>
    <!--左右点击按钮-->
    <div class="btn">
        <span class="prev"><</span>
        <span class="next">></span>
    </div>
</div>
</body>
</html>
